<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片墙</title>
</head>
<style>
    *{font-size: 12px;}
    .imgDiv{width:120px; height:120px; float:left;
        border:12px solid transparent;
        border-image-source: linear-gradient(to right, #b9b6b6, #c3efc3, #78787a);
        border-image-slice: 1;
        border-image-repeat: stretch;
        box-shadow: 5px 5px 2px 1px #C1C1C1;
        margin:2em 2em 1em 0;
        padding:5px;
    }
    .imgDiv img {width:120px; height:120px;}
    .imgDiv img:hover{cursor:zoom-in; width:122px; height:122px;}
    .imgDiv p {cursor:pointer; font-weight:bold; margin:2em 0}
    .imgDiv p:hover {color: #999}


    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .delete-confirm {
        background: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        text-align: center;
    }
    .delete-confirm button {
        margin: 10px;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .delete-confirm .confirm {
        background-color: #e74c3c;
        color: white;
    }
    .delete-confirm .cancel {
        background-color: #3498db;
        color: white;
    }
</style>
<body>
<form th:method="get" th:action="@{/admin/file/imagePage}">
    <div>
        <input type="hidden" name="size" th:value="90"/>
        <input type="hidden" name="current" th:value="1"/>
        <laber>图片上传日期</laber>
        <input type="date" name="uploadTimeStart" th:value="${#request.getParameter('uploadTimeStart')}"/> -
        <input type="date" name="uploadTimeEnd" th:value="${#request.getParameter('uploadTimeEnd')}"/>
        <laber>图片名</laber>
        <input type="text" name="fileName" th:value="${#request.getParameter('fileName')}"/>
        <button th:type="search">搜索</button>
        &nbsp;&nbsp;
    </div>
</form>
<div th:replace="/common/page::page"></div>

<div class="imgDiv" th:attr="data-id=${data.fileId}, data-name=${data.fileName}" th:if="${data.fileId}" th:each="data:${page.records}" onmousedown="startLongPress(event, this)" onmouseup="endLongPress()" ontouchstart="startLongPress(event, this)" ontouchend="endLongPress()">
    <a href="javascript:void(0);" th:onclick="maxImg([[${data.fileName}]]);">
        <img th:src="@{/images/__${data.fileName}__}"
             th:title="${data.fileName}"
             th:alt="${data.fileName}"/>
    </a>
    <p th:onclick="copyToClipboard([[${data.fileName}]])">△点击我复制文件名↑</p>
</div>
<div id="overlay" class="overlay">
    <div class="delete-confirm">
        <p>确认删除吗？</p>
        <button class="confirm" onclick="confirmDelete()">删除</button>
        <button class="cancel" onclick="hideOverlay()">取消</button>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var maxImgUrl = /*[[@{/admin/file/imageDetail}]]*/ null;
    var maxImg = function (fileName) {
        //获得窗口的水平位置
        window.open(maxImgUrl+'?fileName='+fileName, 'maxImg','width=800 height=800');
    }

    var copyToClipboard = function (fileName) {
        // 创建一个临时的textarea元素
        const tempTextArea = document.createElement('textarea');
        tempTextArea.value = fileName;

        // 将textarea添加到DOM中
        document.body.appendChild(tempTextArea);

        // 选择并复制textarea的内容
        tempTextArea.select();
        document.execCommand('copy');

        // 移除临时的textarea元素
        document.body.removeChild(tempTextArea);

        // 可选：显示复制成功的提示
        alert('已复制到剪贴板，图片名称: ' + tempTextArea.value);
    }

    // ************************遮罩删除效果*********************************
    let longPressTimeout = null;
    const overlay = document.getElementById('overlay');
    let targetItem = null;
    var imageDelUrl = /*[[@{/admin/file/imageDel}]]*/ null;

    function startLongPress(event, item) {
        targetItem = item;
        longPressTimeout = setTimeout(() => {
            showOverlay();
        }, 1000); // 长按1秒后显示遮罩层
    }

    function endLongPress() {
        clearTimeout(longPressTimeout);
    }

    function showOverlay() {
        overlay.style.display = 'flex';
    }

    function hideOverlay() {
        overlay.style.display = 'none';
    }

    function confirmDelete() {
        if (targetItem) {
            targetItem.remove();
            hideOverlay();
            let fileId = targetItem.getAttribute("data-id");
            let fileName = targetItem.getAttribute("data-name");
            let data = {};
            data.fileId = fileId;
            data.fileName = fileName;
            postDel(imageDelUrl, JSON.stringify(data));
        }
    }

    function postDel(url, data) {
        fetch(url,{
                method:'POST',
                body:data,
                headers:{'Content-Type' : 'application/json'}
        })
        .then(response => {
            if(!response.ok) {
                throw new Error('网络错误');
            }
            return response.json();
        })
        .then(data => {
            console.log('执行成功:'+JSON.stringify(data));
        })
        .catch(error => {
            console.error('执行失败:', error);
        });
    }
    /*]]>*/
</script>
</body>
</html>
